<template>
	<base-page :bg-color="skinColor.color_bg_1" @submit="handleSubmit">
		<header v-if="staticDataForm.length == 0">
			<form-header text="staticData静态数据"></form-header>
		</header>
		<template v-for="(form, i) in staticDataForm">
			<header>
				<form-header :text="'静态数据 - ' + (i + 1)">
					<template #right>
						<com-icon :disabled="disabled" name="close" size="40rpx" :color="skinColor.color_1" @click="handleCloseStaticData(i)"></com-icon>
					</template>
				</form-header>
			</header>
			<cell>
				<form-item
				v-for="(key, j) in Object.keys(form)"
				:key="j"
				v-model="form[key]"
				:type="data[key].type"
				:label="data[key].label"
				:disabled="disabled"
				@selectIcon="handleIconSelect('staticDataForm', i, key)"></form-item>
			</cell>
		</template>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleAddStatciData">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加静态数据</text>
			</view>
		</cell>
		<header>
			<form-header text="request请求"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(requestForm)">
			<form-item
			closeable
			v-model="requestForm[key]"
			:type="request[key].type"
			:label="request[key].label"
			:disabled="disabled"
			@close="handleClose('requestForm', key)"></form-item>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleRequestSelect">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加请求属性</text>
			</view>
		</cell>
		<header>
			<form-header text="dynamicData动态数据"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(dynamicDataForm)">
			<form-item v-model="dynamicDataForm[key]" type="rule" :label="(data[key] ? data[key].label : dynamic[key].label) + '规则'" :disabled="disabled"></form-item>
		</cell>
	</base-page>
</template>

<script>
	import FormItem from '../components/FormItem.vue'
	import FormHeader from '../components/Header.vue'
	import { Component, Request } from '@/assets/js/interface.js'
	import BasePage from './base.vue'
	export default {
		inject: ['selectOptions', 'selectIcon', 'getSkinColor', 'deleteProperty', 'getQuery', 'deepClone', 'getType'],
		components: { BasePage, FormItem, FormHeader },
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			query () {
				return this.getQuery()
			},
			disabled () {
				return this.query.disabled
			},
			type () {
				return this.getType()
			},
			data () {
				return Component[this.type].data
			},
			dynamic () {
				return Component[this.type].dynamicData
			},
			staticData () {
				const obj = {}
				Object.keys(this.data).forEach(key => {
					obj[key] = this.data[key].value
				})
				return obj
			},
			dynamicData () {
				const obj = {}
				Object.keys(this.dynamic).forEach(key => {
					obj[key] = this.dynamic[key].value
				})
				return {...obj, ...this.staticData}
			},
			request () {
				return Request
			},
			originForm () {
				return this.query.form
			}
		},
		data () {
			return {
				staticDataForm: [],//静态数据
				requestForm: {},//请求
				dynamicDataForm: {}//动态数据
			}
		},
		created () {
			this.dynamicDataForm = this.deepClone(this.dynamicData)
			if ( this.originForm ) {
				this.requestForm = this.originForm.request || {}
				const staticData = this.originForm.staticData || []
				staticData.forEach(item => {
					this.staticDataForm.push( Object.assign({}, this.staticData, item) )
				})
				const dynamicData = this.originForm.dynamicData || {}
				Object.keys(this.dynamicDataForm).forEach(key => {
					this.dynamicDataForm[key] = dynamicData[key] || this.dynamicDataForm[key]
				})
			}
		},
		methods: {
			handleClose (formName, k) {
				this[formName] = this.deleteProperty(this[formName], k)
			},
			handleAddStatciData () {
				const item = this.deepClone(this.staticData)
				this.staticDataForm.push(item)
			},
			handleCloseStaticData (i) {
				this.staticDataForm.splice(i, 1)
			},
			handleIconSelect (formName, index, key) {
				this.selectIcon({
					success: res => {
						this.$set(this[formName][index], key, res.name)
					}
				})
			},
			handleRequestSelect () {
				if ( this.disabled ) return
				this.selectOptions({
					title: '选择添加的属性',
					actions: Object.keys(this.request).filter(key => Object.keys(this.requestForm).indexOf(key) == -1).map(key => this.request[key].label),
					success: res => {
						const keys = Object.keys(this.request)
						const index = keys.findIndex(key => this.request[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this.requestForm, key, this.request[key].value)
					}
				})
			},
			handleSubmit (data) {
				this.$emit('submit', Object.assign({}, data, { staticData: this.staticDataForm,
					request: this.requestForm,
					dynamicData: this.dynamicDataForm,
				}))
			}
		}
	}
</script>

<style>
</style>